import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Card, Space, Input, Button, Avatar, List, message } from "antd";
import http from "../../api/axiosapi";
function Index() {
  const { id } = useParams();
  console.log(id);
  const [data, setData] = useState("");
  const [flag, setFlag] = useState(null);
  const [handjiant, setHandjiant] = useState("");
  const [handjiants, setHandjiants] = useState("");
  const [messageApi, contextHolder] = message.useMessage();
  const getdata = async () => {
    const res = await http.get(`/api/article/${id}`);
    console.log(res);
    setData(res.data);
  };
  useEffect(() => {
    getdata();
  }, []);

  const fasong = async () => {
    if (!handjiant.trim()) {
      messageApi.open({
        type: "error",
        content: "This is an error message",
      });
    }
    const res = await http.post("/api/discuss", {
      userId: 47529555, // 47529555 用户id
      content: handjiant, //评论内容
      //  commentId:number,//评论ID（非必填，回复评论时使用）
      articleId: id, // 文章id 90
    });
    console.log("huifu", res);
    getdata();
    setHandjiant("");
  };
  const fasongs = async (idd) => {
    if (!handjiants.trim()) {
      messageApi.open({
        type: "error",
        content: "This is an error message",
      });
    }
    const res = await http.post("/api/discuss", {
      userId: 47529555, // 47529555 用户id
      content: handjiants, //评论内容
      //  commentId:number,//评论ID（非必填，回复评论时使用）
      commentId:idd,
      articleId: id, // 文章id 90
    });
    console.log("huifu", res);
    getdata();
    setHandjiants("");
  };
  const handdianj = (id) => {
    setFlag(id);
  };
  return (
    <div>
      <div style={{ padding: "20px", background: "#eee" }}>
        <Card
          size="small"
          title={data.title}
          extra={<a href="#">{data.createdAt}</a>}
          style={{ width: "100%" }}
        >
          <p>{data.content}</p>
        </Card>
      </div>
      <div style={{ display: "flex", alignItems: "center" }}>
        <Input.TextArea
          value={handjiant}
          onChange={(e) => setHandjiant(e.target.value)}
        />
        <Button style={{ height: "50px" }} onClick={fasong}>
          发送评论
        </Button>
        {contextHolder}
      </div>
      <List
        style={{ marginLeft: "20px" }}
        itemLayout="horizontal"
        dataSource={data.comments}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              avatar={
                <Avatar
                  src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
                />
              }
              title={<a href="https://ant.design">{item.id}</a>}
              description={
                <div>
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <span>
                      <p>{item.content}</p>
                      <p>{item.createdAt}</p>
                    </span>
                    <Button onClick={() => handdianj(item.id)}>展开</Button>
                  </div>
                  {flag === item.id && (
                    <div>
                      <div style={{ display: "flex", alignItems: "center" }}>
                        <Input.TextArea
                          value={handjiants}
                          onChange={(e) => setHandjiants(e.target.value)}
                        />
                        <Button style={{ height: "50px" }} onClick={()=>fasongs(item.id)}>
                          发送评论
                        </Button>
                      </div>
                      <List
                        style={{ marginLeft: "20px" }}
                        itemLayout="horizontal"
                        dataSource={item.replies}
                        renderItem={(item, index) => (
                          <List.Item>
                            <List.Item.Meta
                              avatar={
                                <Avatar
                                  src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
                                />
                              }
                              title={<a href="https://ant.design">{item.id}</a>}
                              description={
                                <div>
                                  <div
                                    style={{
                                      display: "flex",
                                      justifyContent: "space-between",
                                    }}
                                  >
                                    <span>
                                      <p>{item.content}</p>
                                      <p>{item.createdAt}</p>
                                    </span>
                                  </div>
                                </div>
                              }
                            />
                          </List.Item>
                        )}
                      />
                    </div>
                  )}
                </div>
              }
            />
          </List.Item>
        )}
      />
    </div>
  );
}

export default Index;
